<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <div class="table-container">
        <!-- 行过滤 -->
        <div>
          <div style="align-items: center; display: flex;">
            <span class="prompt-message">行过滤:</span>
            <a-tooltip placement="topLeft" :mouse-enter-delay="0.5">
              <template slot="title">
                同一组内为and,不同组间为or
              </template>
              <a-icon
                type="question-circle"
                style="margin-bottom: 12px; margin-left: 10px;"
              ></a-icon>
            </a-tooltip>
          </div>
          <div v-if="selectNode.data.input.length > 0">
            <div
              v-for="(group, index) in rowsFilter"
              :key="'group' + index"
              class="ranks-filter-group"
            >
              <!-- group box -->
              <div class="group-box">
                <div class="group-box-left">
                  <span v-if="group.length > 1">且</span>
                </div>
                <div class="group-box-center">
                  <div
                    v-for="(item, idx) in group"
                    :key="'item' + idx"
                    class="filter-item"
                  >
                    <!--  item box -->
                    <div class="filter-item-box">
                      <a-select
                        v-model="item.fieldName"
                        class="filter-select"
                        size="small"
                      >
                        <a-select-option
                          v-for="(column, sort) in allInput"
                          :key="'select' + sort"
                          :value="column"
                          >{{ column }}</a-select-option
                        >
                      </a-select>
                      <a-select
                        v-model="item.condition"
                        class="filter-select"
                        size="small"
                      >
                        <a-select-option :value="'='">等于</a-select-option>
                        <a-select-option :value="'>'">大于</a-select-option>
                        <a-select-option :value="'>='"
                          >大于等于</a-select-option
                        >
                        <a-select-option :value="'<'">小于</a-select-option>
                        <a-select-option :value="'<='"
                          >小于等于</a-select-option
                        >
                      </a-select>
                      <div class="filter-input-box">
                        <a-input
                          v-model="item.value"
                          class="filter-input"
                          size="small"
                        />
                      </div>
                      <a-icon-font
                        type="iconzengjia"
                        class="add-delete-icon"
                        @click="addFilterItem(index)"
                      />
                      <a-icon-font
                        type="icontianjiachengyuan"
                        class="add-delete-icon"
                        @click="deleteFilterItem(index, idx)"
                      />
                    </div>
                  </div>
                </div>
                <div class="group-box-right">
                  <a-icon-font
                    type="iconicon-beifen5"
                    @click="deleteFilterGroup(index)"
                  />
                </div>
              </div>
            </div>
            <div class="add-line-filter" @click="addFilterGroup">
              <a-icon type="plus" />
              添加行过滤
            </div>
          </div>
          <div v-if="selectNode.data.input.length === 0" class="no-father-node">
            -- 请先添加父节点 --
          </div>
        </div>
        <div class="horizontal-divider"></div>
        <!-- 列过滤 -->
        <div>
          <div class="prompt-message">列过滤:</div>
          <div
            v-if="selectNode.data.input.length > 0"
            class="column-filter-input"
          >
            <!-- 全选 -->
            <div class="all-select">
              <span v-if="selectNode.data.input.length > 0">
                <a-checkbox
                  :checked="
                    allInput.length === columnsFilter.length &&
                    allInput.length !== 0
                  "
                  @change="onCheckAllChange($event)"
                  >全选</a-checkbox
                >
              </span>
            </div>
            <!-- 列 checkbox -->
            <div>
              <span
                v-for="(item2, index2) in allInput"
                :key="index2"
                class="checkbox-label"
              >
                <a-checkbox
                  :checked="columnsFilter.includes(item2)"
                  :value="item2"
                  @change="onChange($event)"
                >
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ item2 }}</span>
                    </template>
                    <span class="btn">
                      {{ item2 }}
                    </span>
                  </a-tooltip>
                </a-checkbox>
              </span>
            </div>
          </div>
          <div v-if="selectNode.data.input.length === 0" class="no-father-node">
            -- 请先添加父节点 --
          </div>
        </div>
      </div>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm">
        {{ buttonText.CONFIRM }}
      </div>
      <div class="btn cancel-btn" @click="cancelChange">
        {{ buttonText.CANCEL }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
// import {Prop} from 'vue-property-decorator'
import { cloneDeep } from 'lodash'
import DataViewStore from '@/store/modules/dataview'
import { Watch } from 'vue-property-decorator'
import { buttonText } from '@/components/studio/data/set-params/constant'

interface RowsFilterItem {
  fieldName: string
  condition: string
  value: string
}

@Component
export default class EtlRanksFilter extends Vue {
  // 行过滤
  public rowsFilter: any = []
  // 列过滤
  public columnsFilter: Array<any> = []
  // 所有输入列
  public allInput: Array<string> = []

  private get selectNode() {
    return DataViewStore.selectNode
  }

  public buttonText: any = buttonText

  // 监听激活的节点
  @Watch('selectNode', { deep: true })
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    }
  }

  public created() {
    this.initSet()
  }

  public initSet() {
    this.allInput = cloneDeep(this.selectNode.data.input[0].tableCols)
    const index = this.allInput.indexOf('_record_id_')
    if (index > -1) {
      this.allInput.splice(index, 1)
    }

    // 配置回显
    if (this.selectNode.data.rowsFilter.length === 0) {
      this.rowsFilter = []
    } else {
      this.rowsFilter = cloneDeep(this.selectNode.data.rowsFilter)
    }
    this.columnsFilter = cloneDeep(this.selectNode.data.columnsFilter)
    const index2 = this.columnsFilter.indexOf('_record_id_')
    if (index2 > -1) {
      this.columnsFilter.splice(index2, 1)
    }
  }

  /**
   * 添加 行过滤 组
   */
  public addFilterGroup() {
    const group: Array<RowsFilterItem> = [
      {
        fieldName: '',
        condition: '>',
        value: '',
      },
    ]
    this.$set(this.rowsFilter, this.rowsFilter.length, group)
  }

  /**
   * 删除 行过滤 组
   */
  public deleteFilterGroup(index: number) {
    this.rowsFilter.splice(index, 1)
  }

  /**
   * 添加 行过滤
   */
  public addFilterItem(index: number) {
    if (this.rowsFilter[index].length < 2) {
      const item = {
        fieldName: '',
        condition: '>',
        value: '',
      }
      this.$set(this.rowsFilter[index], 1, item)
    }
  }

  /**
   * 删除 行过滤
   */
  public deleteFilterItem(index: number, idx: number) {
    if (this.rowsFilter[index].length === 2) {
      this.rowsFilter[index].splice(idx, 1)
    }
  }

  /**
   * 列过滤 全选
   */
  public onCheckAllChange($event: any) {
    this.columnsFilter = $event.target.checked ? cloneDeep(this.allInput) : []
  }

  /**
   * 列过滤 改变选中状态
   */
  public onChange($event: any) {
    if ($event.target.checked) {
      const index = this.columnsFilter.indexOf($event.target.value)
      if (index < 0) {
        this.columnsFilter.push($event.target.value)
      }
    } else {
      const index = this.columnsFilter.indexOf($event.target.value)
      if (index > -1) {
        this.columnsFilter.splice(index, 1)
      }
    }
  }

  /**
   * 确认修改
   */
  public confirm() {
    let status = true
    this.rowsFilter.forEach((item: Array<RowsFilterItem>) => {
      item.forEach((item2: RowsFilterItem) => {
        if (item2.fieldName === '' || item2.value === '') {
          status = false
        }
      })
    })
    if (this.columnsFilter.length === 0) {
      status = false
    }
    if (status) {
      const columnsFilter = cloneDeep(this.columnsFilter)
      columnsFilter.push('_record_id_')
      this.$emit('confirm', { rowsFilter: this.rowsFilter, columnsFilter })
    } else {
      this.$message.warning('请检查行过滤条件, 且列过滤不允许为空！')
    }
  }

  /**
   * 重置修改
   */
  public cancelChange() {
    this.initSet()
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.table-container {
  .horizontal-divider {
    border-top: 1px solid #e9e9e9;
    height: 1px;
    margin: 16px 0;
  }

  .prompt-message {
    color: #5d637e;
    letter-spacing: 0.86px;
    margin-bottom: 12px;
  }
  /* 行过滤 外层组 包含逻辑符号 */
  .ranks-filter-group {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    width: 100%;

    /* 内层组 同 ranks-filter-group */
    .group-box {
      align-items: center;
      border: 1px solid #e9e9e9;
      border-bottom: 0;
      display: flex;
      padding: 0 5px;
      width: 100%;

      /* 内层 逻辑符号 或 */
      .group-box-left {
        margin-right: 6px;
        text-align: center;
        width: 14px;
      }

      /* 中间条件 select select input */
      .group-box-center {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(100% - 40px);

        /* 每一条 条件 */
        .filter-item {
          width: 100%;

          .filter-item-box {
            align-items: center;
            display: flex;
            margin: 4px 0;
            width: 100%;

            /* 下拉选择 */
            .filter-select {
              flex-shrink: 0;
              height: 24px;
              margin-right: 4px;
              width: calc(33% - 13px);
            }

            /* 输入框 */
            .filter-input-box {
              flex-shrink: 0;
              height: 24px;
              margin-right: 4px;
              width: calc(33% - 18px);

              .filter-input {
                width: 100%;
              }
            }

            /* 添加删除 按钮 */
            .add-delete-icon {
              margin-left: 6px;
            }
          }
        }
      }

      /* 删除组按钮 */
      .group-box-right {
        align-items: center;
        display: flex;
        margin-left: 6px;
        width: 14px;
      }
    }

    input {
      background-color: transparent;
      border: 1px solid #d2d2d2;
      border-radius: 3px;
      margin-right: 5px;
      outline: none;
      width: 25%;
    }
  }

  /* 添加行过滤 */
  .add-line-filter {
    border: 1px solid #e9e9e9;
    color: #6973ff;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    text-align: center;
    user-select: none;
    width: 100%;
  }

  /* 列过滤 */
  .column-filter-input {
    background: #f1f1f1;
    border-radius: 4px;
    padding: 8px;

    /* 全选 */
    .all-select {
      margin-bottom: 6px;
    }

    /* 列 checkbox */
    .checkbox-label {
      display: inline-block;
      width: 25%;

      /deep/ .ant-checkbox-wrapper {
        align-items: center;
        display: flex;
        width: 100%;

        > span:last-child {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: calc(100% - 18px);

          .btn {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
/* 没有父节点 */
.no-father-node {
  color: #888;
  font-size: 12px;
  font-style: italic;
  padding: 15px 10px 0;
  text-align: center;
}
</style>
